<template>
  <div
    class="collect_button"
    @click="Debounce(), (CollectStore.isCollect = !CollectStore.isCollect)"
  >
    <button>
      <span v-if="!CollectStore.isCollect" class="iconfont icon-aixin"></span>
      <span v-else class="iconfont icon-aixin1"></span>
      <span>{{ CollectStore.isCollect ? '已追番' : '追番' }}</span>
    </button>
  </div>
</template>

<script>
import { debounce } from '@/hook/utils'

import { UserCollectStore } from '@/stores/request'

export default {
  name: 'CollectButton',
  props: {
    id: {
      default: null
    }
  },
  setup() {
    const CollectStore = UserCollectStore()

    const Debounce = debounce(() => {
      if (CollectStore.isCollect) {
        CollectStore.addCollect()
      } else {
        CollectStore.deleteCollect()
      }
    }, 300)

    return {
      CollectStore,
      Debounce
    }
  }
}
</script>

<style lang="scss" scoped>
.collect_button {
  width: 90px;
  height: 34px;
  button {
    cursor: pointer;
    width: 100%;
    height: 100%;
    // padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    outline: none;
    background-color: $primary;
    color: $font;
    border-radius: 4px;
    span {
      user-select: none;
    }
  }
}
</style>
